<template>
  <div class="development-history">
    <div id="subLine-controller">
      <div class="item-wrapper">
        <div
          class="item"
          v-for="item in subLineData"
          :key="item.name"
          @click.stop="handleItemClick(item)"
        >
          <div
            class="box"
            :style="{ borderColor: item.color, backgroundColor: item.color }"
          ></div>
          <span :style="{ color: '#34c5cf' }">{{ item.name.slice(-3) }}</span>
        </div>
      </div>
    </div>
    <div class="active-panel">
      <div class="header">
        <strong>发展历程</strong>
        <div class="controler">
          <i class="iconfont metro-pause" @click="pause"></i>
          <i class="iconfont metro-play" @click="play"></i>
          <i class="iconfont metro-icon-replay-copy" @click="replay"></i>
        </div>
      </div>
      <div class="content">
        <a-slider
          v-if="resPaths.length !== 0"
          v-model:value="currentTime"
          :marks="marks"
          :step="0.5"
          :min="0"
          :max="max"
          :disabled="true"
        />
      </div>
      <div class="message" v-if="message">{{ message }}</div>
    </div>
    <div class="line-list">
      <div
        v-for="line in metroStore.lines"
        :key="line.id"
        @click="selectLine(line)"
        :class="{ active: line.id === metroStore.choosedLine?.id }"
      >
        {{ line.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useLineStore } from '@/store/lineStore'
import { useMetroStore } from '@/store/metroStore'
import * as Cesium from 'cesium'
// 里程碑数据示例
const milestoneData = [
  { time: '2022-05-01', message: '1号线四期泾河延长线开工', line: '1号线' },
  { time: '2024-07-31', message: '全线20座车站封顶', line: '全线' },
]
const lineStore = useLineStore()
const metroStore = useMetroStore()
const subLineData = lineStore.subLineData
const marks = ref({})
const currentTime = ref(0)
const max = ref(100)
const message = ref('')
const animationRequest = ref(null)
const resPaths = ref([])
const viewer = ref(null)

onMounted(() => {
  viewer.value = lineStore.viewer
  // 隐藏所有线路
  // 这里假设每条线路有唯一 name
  // 你可根据实际数据结构调整
  // 禁用图层控制
  // 初始化 marks
  marks.value = generateMarks(milestoneData)
})

function generateMarks(data) {
  const sorted = data
    .slice()
    .sort((a, b) => new Date(a.time) - new Date(b.time))
  return sorted.reduce((acc, item, index) => {
    acc[index * 10] = { label: item.time }
    return acc
  }, {})
}

function handleItemClick(item) {
  // 过滤当前线路的里程碑数据
  const lineMilestones = milestoneData.filter(
    (m) => m.line === item.name || m.line === '全线'
  )
  marks.value = generateMarks(lineMilestones)
  max.value = lineMilestones.length * 10
  // 渲染线路
  renderLine(item.coordinates, item.color)
  currentTime.value = 0
  message.value = lineMilestones[0]?.message || ''
}

function renderLine(coordinates, color) {
  if (!viewer.value) return
  viewer.value.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray(coordinates),
      width: 5,
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.1,
        color: Cesium.Color.fromCssColorString(color),
      }),
    },
  })
}

function play() {
  animationRequest.value = requestAnimationFrame(animate)
}
function pause() {
  cancelAnimationFrame(animationRequest.value)
}
function replay() {
  currentTime.value = 0
  play()
}
function animate() {
  // 这里假设 milestoneData.length 与 max 匹配
  const index = Math.floor(
    (currentTime.value / max.value) * milestoneData.length
  )
  message.value = milestoneData[index]?.message || ''
  currentTime.value += 0.5
  if (currentTime.value <= max.value) {
    animationRequest.value = requestAnimationFrame(animate)
  }
}
onBeforeUnmount(() => {
  pause()
  // 还原图层控制、显示所有线路等
  // 清理实体
  if (viewer.value) {
    viewer.value.entities.removeAll()
  }
})

const selectLine = (line) => {
  metroStore.choosedLine = line
  // 选中线路后触发列车渲染
  // emit 或直接调用渲染函数
}
</script>

<style scoped>
#subLine-controller {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}
.item .box {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.active-panel {
  padding: 2rem;
  background: rgba(0, 0, 0, 0.8);
  color: white;
}
.line-list {
  margin-top: 1rem;
}
.line-list div {
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.line-list div.active {
  background: rgba(52, 197, 207, 0.2);
}
</style>
